export default {
  mounted() {
    let {
      left,
      top,
      transform
    } = document.querySelector('.img-wrapper').style
    // 正则捕获scale倍数值，先行断言'scale('，后行断言')'，反斜线'\'转义圆括号
    let scaleMatchObj = new RegExp(/(?<=scale\()(\d+\.)?\d+(?=\))/).exec(transform)
    if (scaleMatchObj === null) {
      this.initProperty.scale = 1
    } else {
      // this.initProperty.scale = Number(scaleMatchObj[0])
      this.initProperty.scale = 1
    }
    let [pleft, ptop] = [parseFloat(left), parseFloat(top)]
    this.initProperty.positionLeft = isNaN(pleft) ? 0 : pleft
    this.initProperty.positionTop = isNaN(ptop) ? 0 : ptop


  },
  data() {
    return {
      baseImgNode: null, // 工艺底图DOM对象
      baseImgWidth: 0, // 工艺底图原始宽
      baseImgHeight: 0, // 工艺底图原始高
      initProperty: {
        scale: 0, // 图片初始放大倍数
        positionLeft: 0, // 初始 css position left
        positionTop: 0, // 初始 css position top
      },

      transformInfo: {
        containerWidth: 1600, // 画布宽度，取决于工艺底图尺寸
        containerHeight: 1600, // 根据工艺底图宽高比例，计算得出
        positionLeft: 0, // 实时 css position left
        positionTop: 0, // 实时 css position top
        scale: 0, // 图片实时放大倍数
        maxZoomScale: 3, // 图片最大放大倍数
        minZoomScale: 0.2, // 图片最小放大倍数
        zoomScaleOffset: 0.1, // 鼠标滚轮每次滚动时图片放大倍数变化量
      }
    }
  },
  computed: {
    // 是否对工艺图进行了操作【缩放，平移】
    isHandled() {
      return this.transformInfo.scale !== this.initProperty.scale || this.transformInfo.positionLeft !== this
        .initProperty
        .positionLeft || this.transformInfo.positionTop !== this.initProperty.positionTop
    },
  },
  methods: {
    zoom(offset) {
      this.transformInfo.scale = Number((this.transformInfo.scale + offset).toFixed(2))
    },
    resetZoomAndPosition() {
      for (let k in this.initProperty) {
        this.transformInfo[k] = this.initProperty[k]
      }
    },
  },
  directives: {
    zoom: {
      bind(el, binding) {
        // 是否定点缩放
        const isFixed = Reflect.has(binding.modifiers, 'fixed')
        // 变化量
        let [mutationX, mutationY] = [0, 0]

        el.addEventListener('mousewheel', (evt) => {
          if (isFixed) {
            const rect = el.getBoundingClientRect()

            const [unitOffsetX, unitOffsetY] = [binding.value.containerWidth * 0.5 * binding.value
              .zoomScaleOffset, binding.value.containerHeight * 0.5 * binding.value.zoomScaleOffset
            ]
            // 图片左边缘到浏览器可视区域左边缘距离、图片上边缘到浏览器可视区域上边缘距离
            let [whiteDistanceX, whiteDistanceY] = [rect.left, rect.top]
            // 图片中心点到图片左边缘、上边缘距离
            let [centerImgDistanceX, centerImgDistanceY] = [binding.value.containerWidth * binding.value.scale *
              0.5, binding.value.containerHeight * binding.value.scale * 0.5
            ]
            // 光标到图片左边缘、上边缘距离
            let [mouseImgDistanceX, mouseImgDistanceY] = [evt.x - whiteDistanceX, evt.y -
              whiteDistanceY
            ]

            mutationX = +Number((centerImgDistanceX - mouseImgDistanceX) / centerImgDistanceX *
              unitOffsetX).toFixed(2)
            mutationY = +Number((centerImgDistanceY - mouseImgDistanceY) / centerImgDistanceY *
              unitOffsetY).toFixed(2)
          }

          if (evt.wheelDelta > 0) {
            // 图片放大
            if (binding.value.scale >= binding.value.maxZoomScale) {
              return
            }
            binding.value.positionLeft += mutationX
            binding.value.positionTop += mutationY
            binding.value.scale = Number((binding.value.scale + binding.value.zoomScaleOffset).toFixed(2))

          } else {
            // 图片缩小
            if (binding.value.scale <= binding.value.minZoomScale) {
              return
            }
            binding.value.positionLeft -= mutationX
            binding.value.positionTop -= mutationY
            binding.value.scale = Number((binding.value.scale - binding.value.zoomScaleOffset).toFixed(2))
          }

        })
      },
    },
    drag: {
      bind(el, binding) {
        el.onmousedown = function(downEvent) {
          downEvent.stopPropagation()

          if(downEvent.which === 3) { // 鼠标右键
            let [prevX, prevY] = [downEvent.x, downEvent.y]

            document.onmousemove = function(moveEvent) {
              binding.value.positionLeft += moveEvent.x - prevX;
              binding.value.positionTop += moveEvent.y - prevY;
              [prevX, prevY] = [moveEvent.x, moveEvent.y]
            }

            // 鼠标停止移动时，事件移除
            document.onmouseup = function(e) {
              document.onmousemove = null
              document.onmouseup = null
            }
          }

        }

      }
    }
  },
}
